import 'package:flutter/material.dart';
import '../demo/ui_demo.dart';
import 'data_source/data.dart';
import 'data_source/post.dart';
import '../wonders/framework.dart';

class MyDemo extends StatelessWidget implements Demo {
  MyDemo(this.title);
  @override
  String title;
  @override
  Widget build(BuildContext context) {
    return new HomePage(title: this.title,);
  }
}

class HomePage extends StatelessWidget {
  String title;
  HomePage({this.title});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text(this.title),
          centerTitle: true,
          elevation: 0,
          actions: <Widget>[
            IconSource("PageView,GridView","06"),
          ],
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.pages),
                text: "PageView",
              ),
              Tab(
                icon: Icon(Icons.grid_on),
                text: "GridView",
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            PageViewDemo(),
            GridViewDemo(),
          ],
        ),
      ),
    );
  }
}

class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //return PageViewStaticDemo();
    return PageViewBuilderDemo();
  }
}

class PageViewBuilderDemo extends StatelessWidget {
  Widget _itemBuilderPageView(BuildContext context, int index) {
    return Stack(
      children: <Widget>[
        SizedBox.expand(
          child: Image.network(
            imagesList2[index].url,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          top: 20.0,
          right: 20.0,
          child: Column(
            children: <Widget>[
              Text(
                imagesList2[index].name,
                style: TextStyle(color: Colors.blue, fontSize: 18, shadows: [
                  Shadow(
                      offset: Offset(0.0, 2.0),
                      color: Colors.redAccent,
                      blurRadius: 12.0)
                ]),
              ),
              Text(
                imagesList2[index].desc,
                style: TextStyle(color: Colors.blue, fontSize: 18.0, shadows: [
                  Shadow(
                      offset: Offset(0.0, 2.0),
                      color: Colors.redAccent,
                      blurRadius: 12.0)
                ]),
              ),
            ],
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
//    return PageView.builder(
//      itemCount: imagesList2.length,
//      itemBuilder: _itemBuilderPageView,
//    );
      return PageLayout(
        builder: _itemBuilderPageView,
        itemCount: imagesList2.length,
      );
  }
}

class PageViewStaticDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PageLayout(
      reverse: false, //是否是反向滚动
      pageSnapping: true, //页面切换弹出、入
      //scrollDirection: Axis.vertical,//滚动方向
      onPageChanged: (currentPage) => debugPrint("page $currentPage pressed"),
      controller: PageController(
          initialPage: 0, //初始页面
          keepPage: true,
          viewportFraction: 0.85 //屏幕占用比例
          ),
      children: <Widget>[
        Container(
          alignment: Alignment(0.0, 0.0),
          color: Colors.brown[900],
          child: Text(
            "ONE",
            style: TextStyle(fontSize: 40.0, color: Colors.white),
          ),
        ),
        Container(
          alignment: Alignment(0.0, 0.0),
          color: Colors.blueGrey[900],
          child: Text(
            "TWO",
            style: TextStyle(fontSize: 40.0, color: Colors.white),
          ),
        ),
        Container(
          alignment: Alignment(0.0, 0.0),
          color: Colors.cyan[900],
          child: Text(
            "THREE",
            style: TextStyle(fontSize: 40.0, color: Colors.white),
          ),
        )
      ],
    );
  }
}

class GridViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // return GridViewStaticDemo();
    return GridViewBuilderDemo();
  }
}

class GridViewStaticDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
//    return GridView(
//      padding: EdgeInsets.all(5.0),
//      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//        crossAxisCount: 3,
//        crossAxisSpacing: 5.0,
//        mainAxisSpacing: 5.0,
//      ),
//      children: <Widget>[
//        Container(
//          alignment: Alignment(0.0, 0.0),
//          color: Colors.grey,
//          child: Text("ITEM0"),
//        ),
//        Container(
//          alignment: Alignment(0.0, 0.0),
//          color: Colors.grey,
//          child: Text("ITEM1"),
//        ),
//        Container(
//          alignment: Alignment(0.0, 0.0),
//          color: Colors.grey,
//          child: Text("ITEM2"),
//        ),
//        Container(
//          alignment: Alignment(0.0, 0.0),
//          color: Colors.grey,
//          child: Text("ITEM3"),
//        ),
//        Container(
//          alignment: Alignment(0.0, 0.0),
//          color: Colors.grey,
//          child: Text("ITEM4"),
//        ),
//      ],
//    );
    return GridLayout(
      padding: EdgeInsets.all(5.0),
      crossAxisCount: 3,
      mainAxisSpacing: 5.0,
      crossAxisSpacing: 5.0,
      children:<Widget>[
        Container(
          alignment: Alignment(0.0, 0.0),
          color: Colors.grey,
          child: Text("ITEM0"),
        ),
        Container(
          alignment: Alignment(0.0, 0.0),
          color: Colors.grey,
          child: Text("ITEM1"),
        ),
        Container(
          alignment: Alignment(0.0, 0.0),
          color: Colors.grey,
          child: Text("ITEM2"),
        ),
        Container(
          alignment: Alignment(0.0, 0.0),
          color: Colors.grey,
          child: Text("ITEM3"),
        ),
        Container(
          alignment: Alignment(0.0, 0.0),
          color: Colors.grey,
          child: Text("ITEM4"),
        ),
      ],
    );
  }
}

class GridViewBuilderDemo extends StatelessWidget {
  Widget _itemBuilderGridDemo(BuildContext context, int index) {
    return Container(
      child: Image.network(
        posts[index].imageUrl,
        fit: BoxFit.cover,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
//    return GridView.builder(
//        addRepaintBoundaries: true,
//        padding: EdgeInsets.all(4.0),
//        itemCount: posts.length,
//        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//          crossAxisCount: 3,
//          //maxCrossAxisExtent: 100,
//          mainAxisSpacing: 4.0,
//          crossAxisSpacing: 4.0,
//          childAspectRatio: 2 / 3,
//        ),
//        itemBuilder: _itemBuilderGridDemo);
  return GridLayout(
    crossAxisCount: 2,
    childAspectRatio: 3/2,
    mainAxisSpacing: 4.0,
    crossAxisSpacing: 4.0,
    padding: EdgeInsets.all(4.0),
    itemCount: posts.length,
    builder: _itemBuilderGridDemo,
  );
  }
}
